<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		svg{border:1px solid #ccc;}
	</style>
</head>
<body>
	
	<svg width="200" height="200" viewBox="0 0 100 100">
		<rect x="20" y="20" width="30" height="20" fill="#f00" >
			<animateTransform attributeName="transform"
							  attributeType="XML"
							  type="translate"
							  from="0"
							  to="10 10"
							  dur="1s"
							  begin="t.click"
							  fill="freeze"/>
		</rect>
		
		<text x="50" y="80" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
	</svg>

	<svg width="200" height="200" viewBox="0 0 100 100">
		<rect x="20" y="20" width="30" height="20" fill="#f00" >
			<animateTransform attributeName="transform"
							  attributeType="XML"
							  type="rotate(45)"
							  from="0 35 30"
							  to="45 35 30"
							  dur="1s"
							  begin="t2.click"
							  fill="freeze"/>
		</rect>
		<text x="50" y="80" font-size="8" text-anchor="middle" id="t2" style="cursor:pointer;user-select:none">点我</text>
	</svg>
	<br/>
	<svg width="200" height="200" viewBox="-50 -50 100 100">
		<rect x="-15" y="-10" width="30" height="20" fill="#f00" >
			<animateTransform attributeName="transform"
							  attributeType="XML"
							  type="scale"
							  from="1"
							  to="2"
							  dur="1s"
							  begin="t3.click"
							  fill="freeze"/>
		</rect>
		<text x="0" y="40" font-size="8" text-anchor="middle" id="t3" style="cursor:pointer;user-select:none">点我</text>
	</svg>

	<svg width="200" height="200" viewBox="-50 -50 100 100">
		<rect x="-15" y="-10" width="30" height="20" fill="#f00" >
			<animateTransform attributeName="transform"
							  attributeType="XML"
							  type="skewX"
							  from="0"
							  to="30"
							  dur="1s"
							  begin="t4.click"
							  fill="freeze"/>
		</rect>
		<text x="0" y="40" font-size="8" text-anchor="middle" id="t4" style="cursor:pointer;user-select:none">点我</text>
	</svg>

</body>
</html>